<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Animation</title>
    <script type="text/javascript" src="../doc/asset/js/esl/esl.js"></script>
</head>
<body style="background-color:black; margin:0px;">
    <script type="text/javascript">
    require.config({
        packages: [
            {
                name: 'zrender',
                location: '../src',
                main: 'zrender'
            }
        ]
    });

    require(
        [
            "zrender",
            "zrender/animation/animation",
            "zrender/shape/Star",
            "zrender/shape/Image",
            "zrender/shape/Polyline",
            "zrender/tool/color"
        ], 
        function (zrender, Animation, StarShape, ImageShape, PolylineShape, colorTool) {
            // 初始化zrender
            var zr = zrender.init(document.getElementById("Main"));

            var circleShape = new StarShape({
                style : {
                    x : 10,
                    y : 10,
                    r : 8,
                    n : 5,
                    shadowColor : 'rgb(52,179,242)',
                    color : '#fff',
                    shadowBlur : 10,
                    shadowOffsetX : 0,
                    shadowOffsetY : 0
                }
            });
            var imageShape = zr.shapeToImage(circleShape, 28, 28);

            var NUMBER = 20;

            for (var i = 0; i < NUMBER; i++) {
                var circle = new ImageShape({
                    scale : [1, 1],
                    zlevel : 1,
                    style : {
                        x : 0,
                        y : 0,
                        image : imageShape.style.image
                    },
                    draggable : false,
                    hoverable : false,
                });

                zr.addShape(circle);
                var deferred = zr.animate(circle.id, "", circle, true);

                var points = [];
                var point = [
                    Math.random() * zr.getWidth(),
                    Math.random() * zr.getHeight()
                ];
                //circle.position = point;
                points.push(point);
                for (var j = 1; j < 10; j++) {
                    var point = [
                        Math.random() * zr.getWidth(),
                        Math.random() * zr.getHeight()
                    ];
                    deferred.when(j * 2000, {
                        position : point
                    });
                    points.push(point);
                }
                var polyline = {
                    zlevel : 0,
                    style : {
                        pointList : points,
                        smooth : 'spline',
                        brushType : 'stroke',
                        strokeColor : colorTool.random(),
                        opacity : 0.2,
                        lineWidth: Math.random() * 5
                    },
                    highlightStyle: {
                        opacity: 1
                    }
                }
                // zr.addShape(new PolylineShape(polyline));

                deferred.start('spline');
            }
            zr.modLayer(1, {
                // clearColor : 'rgba(255, 255, 255, 0.1)'
                motionBlur : true,
                lastFrameAlpha : 0.8
            });
            zr.render();

        }
    );
    </script>
    <div id="Main" style="width:1000px;height:600px;"></div>
</body>
</html>